<template>
  <div class="box">
    <div>
      <el-image :src="props.book.cover"></el-image>
    </div>
    <div class="book-title">
      <el-text>{{ props.book.title }}</el-text>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  book: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.box {
  padding:5px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.box:hover {
  border: 1px solid #409EFF;
}

.book-title {
  text-align: center;
}
</style>
